<%--
  Created by IntelliJ IDEA.
  User: 杨麟
  Date: 2022/2/17
  Time: 17:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册用户信息</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.js"></script>
    <script>
        var isusername = false;
        function check() {
            var ouserName = $("userName");
            if(ouserName.value==''){
                alert("用户名不能为空！");
                return false;
            }
            if (!isusername){
                alert("用户名已被注册")
                return false
            }
            return true;
        }
    </script>
</head>
<body>
<div class="col-md-4">
    <form action="${pageContext.request.contextPath}/ServletMain?cmd=register" class="form-group" method="post" onsubmit="return check()">
        <table class="table table-bordered">
            <tr>
                <th colspan="2" scope="col" align="center">用户信息注册</th>
            </tr>
            <tr>
                <td>用户名</td>
                <td>
                    <input name="userName" class="form-control" type="text" id="userName"/>
                    <span id="sp"></span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input name="userPwd" class="form-control" type="password" id="userPwd" /></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input name="reUserPwd" class="form-control" type="password" id="reUserPwd" /></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <div class="radio-inline">
                            <input type="radio" name="sex" value="男" checked/> 男
                    </div>
                    <div class="radio-inline">
                            <input type="radio" name="sex" value="女" /> 女
                    </div>
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    <div class="checkbox-inline"><input name="chk" type="checkbox" id="chk1" value="书法" /> 书法</div>
                    <div class="checkbox-inline"><input name="chk" type="checkbox" id="chk2" value="舞蹈" /> 舞蹈</div>
                    <div class="checkbox-inline"><input name="chk" type="checkbox" id="chk3" value="音乐" /> 音乐</div>
                    <div class="checkbox-inline"><input name="chk" type="checkbox" id="chk4" value="绘画" /> 绘画</div>
                    <div class="checkbox-inline"><input name="chk" type="checkbox" id="chk5" value="游泳" /> 游泳</div>
                </td>
            </tr>
            <tr>
                <td>学历</td>
                <td><select name="sel" class="form-control" id="sel">
                    <option value="" selected="selected">====请选择====</option>
                    <c:forEach items="${Education}" var="education">
                        <option value="${education.eid}">
                                ${education.ename}</option>
                    </c:forEach>
                </select></td>
            </tr>
            <tr>
                <td>家庭住址</td>
                <td><textarea class="form-control" name="address" cols="50" rows="10" id="address"></textarea></td>
            </tr>
            <tr>
                <td>生日</td>
                <td><input class="form-control" type="date" name="birthday" id="birthday"></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" class="btn btn-success" name="Submit" value="提交信息" />
                    <input type="reset" class="btn btn-info" name="Submit2" value="重置" />
                </td>
            </tr>
        </table>
    </form>

</div>

<script>
    /*入口函数*/
    $(function () {
        console.log("123");
        //给文本框绑定失去焦点事件
        $("#userName").blur(function () {
            console.log("456");
            //获取文本框对象的值
            var username = $("#userName").val();
            //发送异步请求，把用户名发送到后端，进行验证
            /**
             * url : 表示异步请求请求到的后端的地址
             * async: 表示当前请求是异步（false）或者是同步（true）
             * dataType: 表示后端响应的数据的格式：json, text
             * data: 前端准备发送到后端的数据
             * type: 表示当请求的方式：get / post
             * success: 表示响应成功之后执行的回调函数
             * 回调函数 : 接收后端响应的数据
             * function(data): 响应回来的数据
             * error: 表示请求失败的响应
             *
             * {"name":"value"}
             */
            $.ajax({
                url:"${pageContext.request.contextPath}/ServletMain?cmd=isuserName",
                async:false,
                dataType:"json",
                data:{"username":username},
                type:"get",
                success:function (data) {
                    console.log("data",data)
                    if(data.msg == "yes"){
                        console.log("abc")
                        $("#sp").html("用户名已被注册！！！")
                        $("#sp").css("color","red");
                        isusername = false;
                    }else if(data.msg == "no"){
                        $("#sp").html("用户名可以使用！！！")
                        $("#sp").css("color","green");
                        isusername = true;
                    }

                }
            })

        })
    })
</script>
</body>
</html>
